<template>
    <!--    <label class="flex flex-col md:flex-row md:items-center w-full">-->
    <!--        <div class="w-36 leading-10 md:text-right">{{ label }}</div>-->
    <!--        <input v-model="childVal" @input="bindVal" class="border rounded w-full outline-none p-2" spellcheck="false"-->
    <!--               :placeholder="placeholder" :type="type" :readonly="readonly"/>-->
    <!--    </label>-->


    <label class="flex flex-col md:flex-row md:items-center w-full">
        <div class="w-36 leading-10 md:text-right">{{ label }}</div>
        <div class="flex rounded border w-full overflow-auto">
            <input ref="hInput" :value="inputVal" @input="handleInput($event)" class="w-full outline-none p-2"
                   spellcheck="false"
                   :placeholder="placeholder" :type="type" :readonly="readonly"/>
            <slot name="right"></slot>
        </div>

    </label>


</template>

<script>
export default {
    name: "hInput",
    components: {},
    model: {
        prop: 'inputVal',
        event: 'inputEvent'
    },
    props: {
        inputVal: {
            type: String,
            default: null
        },
        label: {
            type: String,
            default: null
        },
        placeholder: {
            type: String,
            default: null
        },
        type: {
            type: String,
            default: 'text'
        },
        readonly: {
            type: Boolean,
            default: false
        }
    },
    computed: {},
    watch: {},
    mounted() {
    },
    methods: {
        handleInput($event) {
            this.$emit('inputEvent', $event.target.value);
            // console.log($event.currentTarget.parentElement.parentElement)

            // $event.currentTarget.parentElement.focus();
            // $event.currentTarget.parentElement.parentElement.focus();
            //
            // $event.preventDefault();
            // return false;
            // console.log(this.$refs.hInput)
            // this.$refs.hInput.focus();
            // this.$nextTick(()=>{
            //     $event.currentTarget.focus();
            //     $event.target.focus();
            // })
        }
    }
}
</script>

<style scoped>

</style>
